// ===================饼图====================
function pieChart(data) {
	let myChart = echarts.init($('.pie')[0]) //$('.pie')是jQuery对象转成dom对象
	let option = {
		tooltip: {
			// {a} 表示series中的name
			// {b} 表示数据中的series.data中的name
			// {c} 表示每一项的值
			// {d} 表示百分比
			formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
		},
		title: {
			text: '籍贯 Hometown',
			textStyle: {
				color: '#6d767e' // 标题演示
			}
		},
		series: [
			{
				name: '各地学员分布',
				type: 'pie', // pie 表示饼图
				radius: ['10%', '65%'], // 内外圈的半径
				center: ['50%', '50%'], // 中心点
				roseType: 'area', // area表示面积模式，radius表示半径模式
				itemStyle: {
					// 每一项的设置
					borderRadius: 4 // 扇形边缘圆角设置
				},
				// data: [
				// 	{ value: 40, name: '北京' },
				// 	{ value: 38, name: '山东' },
				// 	{ value: 32, name: '上海' },
				// 	{ value: 30, name: '江苏' },
				// 	{ value: 28, name: '河北' },
				// 	{ value: 26, name: '山西' },
				// 	{ value: 22, name: '河南' },
				// 	{ value: 18, name: '辽宁' }
				// ]
				data: data
			}
		]
	}
	myChart.setOption(option)
}
// pieChart()

// ==================折线图===================
function lineChart(lineName, salary, truesalary) {
	let myChart = echarts.init($('.line')[0])
	let option = {
		// 图例
		legend: {
			top: 20
		},
		// 鼠标移入的提示
		tooltip: {
			trigger: 'axis', // 轴触发
			position: function (pt) {
				// pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
				// 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
				return [pt[0], '10%']
			}
		},
		// 标题
		title: {
			text: '薪资 Salary',
			textStyle: {
				color: '#6d767e'
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false, // x轴两边的留白策略，false表示不留空白
			data: lineName
		},
		yAxis: {
			type: 'value',
			// Y轴类型为value，则留白策略指的是对数据的延伸。
			// 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
			boundaryGap: [0, '50%']
		},
		// 数据缩放组件
		dataZoom: [
			// {
			//   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
			//   start: 0,
			//   end: 10
			// },
			{
				//type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
				start: 0, // 拖动滑块起始位置（这是一个百分比）
				end: 15 // 拖动滑块结束位置（这是一个百分比）
			}
		],
		// 数据部分
		series: [
			{
				name: '期望薪资',
				type: 'line',
				smooth: true, // 表示使用平滑曲线
				symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
				itemStyle: {
					// 单独控制这条线的颜色
					color: '#ee6666'
				},
				data: salary
				// data: [
				// 	8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000,
				// 	17000, 12000, 8300, 9600, 15000, 17000, 12000
				// ]
			},
			{
				name: '实际薪资',
				type: 'line',
				smooth: true,
				symbol: 'none',
				itemStyle: {
					// 单独控制这条线的颜色
					color: '#5470c6'
				},
				data: truesalary
				// data: [
				// 	9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000,
				// 	12000, 8300, 9600, 15000, 17000, 12000, 13000
				// ]
			}
		]
	}

	myChart.setOption(option)
}
// lineChart()

// ==================柱状图===================
function barChart({ avgScore, group, gt60, gt80, lt60 }) {
	let myChart = echarts.init($('.barChart')[0])
	let option = {
		// 网格（整个图表区域设置）
		grid: {
			top: 30,
			bottom: 30,
			left: '7%',
			right: '7%'
		},
		// 鼠标移入的提示
		tooltip: {
			trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
			axisPointer: {
				// 坐标轴指示器配置项
				// 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
				type: 'cross', // 横着的一条虚线
				crossStyle: {
					color: '#999'
				}
			}
		},
		// 图例
		legend: {},
		// X轴
		xAxis: [
			{
				type: 'category',
				// data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
				data: group,
				axisPointer: {
					// 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
					type: 'shadow'
				}
			}
		],
		// Y轴
		yAxis: [
			{
				type: 'value',
				min: 0, // y轴数据最小值
				max: 100, // y轴数据最大值
				interval: 10, // step步长，把y轴的数据分成多少份
				axisLabel: {
					// Y轴文字设置
					formatter: '{value}分' // Y轴文字
				}
			},
			{
				type: 'value',
				min: 0,
				max: 10,
				interval: 1,
				axisLabel: {
					formatter: '{value}人'
				}
			}
		],
		// 数据部分（4组数据）
		series: [
			{
				name: '平均分',
				type: 'bar',
				// data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
				data: avgScore,
				barWidth: '15'
			},
			{
				name: '低于60分人数',
				type: 'bar',
				// data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
				data: lt60,
				barWidth: '15',
				yAxisIndex: 1 // Y轴索引，1表示使用第2个Y轴
			},
			{
				name: '60到80分之间',
				type: 'bar',
				yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
				barWidth: '15',
				// data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4]
				data: gt60
			},
			{
				name: '高于80分人数',
				type: 'bar',
				yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
				barWidth: '15',
				// data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
				data: gt80
			}
		]
	}

	myChart.setOption(option)
}
// barChart()

// ===================地图====================
function mapChart(chinaGeoCoordMap, chinaDatas) {
	let myChart = echarts.init($('.map')[0])

	var convertData = function (data) {
		var res = []
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i]
			var fromCoord = chinaGeoCoordMap[dataItem[0].name]
			var toCoord = [116.4551, 40.2539]
			if (fromCoord && toCoord) {
				res.push([
					{
						coord: fromCoord,
						value: dataItem[0].value //与下面交换位置
					},
					{
						coord: toCoord //与上面交换位置 可以做出反向路线
					}
				])
			}
		}
		return res
	}

	var series = []
	;[['北京市', chinaDatas]].forEach(function (item, i) {
		console.log(item)
		series.push(
			{
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'arrow', //箭头图标
					symbolSize: 5, //图标大小
					color: 'red' //线上的将头颜色
				},
				lineStyle: {
					normal: {
						width: 1, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: 0.3 //尾迹线条曲直度
					}
				},
				data: convertData(item[1])
			},
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					//涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 3 //波纹圆环最大限制，值越大波纹越大
				},
				label: {
					normal: {
						show: true,
						position: 'right', //显示位置
						offset: [5, 0], //偏移设置
						formatter: function (params) {
							//圆环显示文字
							return params.data.name
						},
						fontSize: 13
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'circle',
				symbolSize: function (val) {
					return 5 + val[2] * 5 //圆环大小
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#f00'
					}
				},
				data: item[1].map(function (dataItem) {
					return {
						name: dataItem[0].name,
						value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
					}
				})
			},
			//被攻击点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						//offset:[5, 0],
						color: '#0f0',
						formatter: '{b}',
						textStyle: {
							color: '#0f0'
						}
					},
					emphasis: {
						show: true,
						color: '#f60'
					}
				},
				symbol: 'pin',
				symbolSize: 50,
				data: [
					{
						name: item[0],
						value: chinaGeoCoordMap[item[0]].concat([10])
					}
				]
			}
		)
	})

	let option = {
		tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(166, 200, 76, 0.82)',
			borderColor: '#FFFFCC',
			showDelay: 0,
			hideDelay: 0,
			enterable: true,
			transitionDuration: 0,
			extraCssText: 'z-index:100',
			formatter: function (params, ticket, callback) {
				//根据业务自己拓展要显示的内容
				var res = ''
				var name = params.name
				var value = params.value[params.seriesIndex + 1]
				res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
				return res
			}
		},
		title: {
			text: '来京路线 From',
			textStyle: {
				color: '#6d767e' // 标题演示
			}
		},
		backgroundColor: '#fff', //黑色改为白色
		// visualMap: {
		// 	//图例值控制
		// 	min: 0,
		// 	max: 1,
		// 	calculable: true,
		// 	show: false,
		// 	color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
		// 	textStyle: {
		// 		color: '#fff'
		// 	}
		// },
		geo: {
			map: 'china',
			zoom: 1.2,
			label: {
				emphasis: {
					show: false
				}
			},
			roam: true, //是否允许缩放
			itemStyle: {
				normal: {
					color: 'rgba(51, 69, 89, .2)', //地图背景色
					borderColor: '#516a89', //省市边界线00fcff 516a89
					borderWidth: 1
				},
				emphasis: {
					color: 'rgba(37, 43, 61, .5)' //悬浮背景
				}
			}
		},
		series: series
	}

	myChart.setOption(option)
}
// mapChart()
// ####################################################################
// ######################### Ajax获取数据  #############################
// ####################################################################
//发送请求 获取班级概况数据
axios.get('./student/overview').then(({ data: res }) => {
	if (res.code === 0) {
		$('.total').text(res.data.total)
		$('.avgSalary').text(res.data.avgSalary)
		$('.avgAge').text(res.data.avgAge)
		$('.proportion').text(res.data.proportion)
	}
})

//2.柱状图

// 点击三个点 切换下拉菜单
$('.bar .btn').on('click', function () {
	// $(this)表示‘三个点’
	// $(this).next()表示它下一个兄弟，就是下拉列表
	$(this).next().toggle() //toggle（）自动检测元素是显示还是隐藏
})

//2.2 点击 li 获取对应的成绩，拿到成绩传入柱状图使用
$('#batch>li').on('click', function () {
	let index = $(this).index()
	let batch = index + 1
	//发送请求，获取柱状图所需数据
	axios.get('/score/batch', { params: { batch } }).then(({ data: res }) => {
		// console.log(res)
		if (res.code === 0) {
			barChart(res.data)
		}
	})
})
// 2.3 点击第一个li 得到第一次成绩
$('#batch>li').eq(0).trigger('click') //trigger是jQuery方法，专门用于触发元素事件

//3. 获取全部学员信息（从中提取 折线 饼图 地图所需数据）
axios.get('/student/list').then(({ data: res }) => {
	let { code, data } = res
	if (code === 0) {
		// 整理出 折线图 饼图 地图 所需数据
		// console.log(res)
		let lineName = []
		let salary = []
		let truesalary = []

		// 饼图所需数据
		let pie = [] // [{name: '河北省', value: 3}, {name: '内蒙古', value: 1}, {name: '山东省', value: 2}, {name: '辽宁省', value: 1}]

		// 地图所需数据
		let chinaGeoCoordMap = { 北京市: [116.4551, 40.2539] }
		let chinaDatas = []

		data.forEach(item => {
			// ---------- 处理折线图所需数据------------------
			lineName.push(item.name)
			salary.push(item.salary)
			truesalary.push(item.truesalary)

			// ----------- 处理饼图所需数据 ------------------
			let i = pie.findIndex(v => v.name === item.province)
			if (i > -1) {
				pie[i].value += 1
			} else {
				pie.push({ name: item.province, value: 1 })
			}

			// ------------ 处理地图所需数据 ----------------
			chinaGeoCoordMap[item.province] = [item.jing, item.wei]
			// chinaDatas.push([{ name: item.province, value: 0 }])
			let k = chinaDatas.findIndex(v => v[0].name === item.province)
			if (k > -1) {
				chinaDatas[k][0].value += 1
			} else {
				chinaDatas.push([{ name: item.province, value: 1 }])
			}
		})
		// 调用 lineChart、pieChart、mapChart，传入数据
		lineChart(lineName, salary, truesalary)
		pieChart(pie)
		mapChart(chinaGeoCoordMap, chinaDatas)
	}
})
